<template>
  <a-extract-style>
    <a-config-provider :theme="myTheme">
      <NuxtLayout :name="layoutName">
        <!-- <a-button type="primary" @click="themeStore.changeTheme" danger>
                    CHANGE_THEME_BUTTON
                </a-button> -->
        <NuxtPage> </NuxtPage>
      </NuxtLayout>
    </a-config-provider>
  </a-extract-style>
</template>

<script setup>
import { computed, nextTick } from 'vue'
import * as AntIconsVue from '@ant-design/icons-vue'
import { theme } from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'

import { useStore } from '@/store'

const { themeStore } = useStore()

// 注册图标
const nuxtApp = useNuxtApp()
for (const [key, component] of Object.entries(AntIconsVue)) {
  nuxtApp.vueApp.component(key, component)
}






const myTheme = computed(() => {
  return {
    token: {
      colorPrimary: '#FFCFD9',
      fontFamily: 'PingFang SC, Helvetica Neue, Arial, sans-serif'
    },
    algorithm: themeStore.isDark
      ? theme.darkAlgorithm
      : theme.defaultAlgorithm
  }
})



// 初始化主题
onMounted(() => {
  updateHtmlClass(themeStore.isDark)
})

// 监听主题变化
watch(
  () => themeStore.isDark,
  (newVal) => {
    nextTick(() => {
      updateHtmlClass(newVal)
    })
  },
  { immediate: true } // 立即执行一次以初始化
)


function updateHtmlClass(isDark) {
  document.documentElement.classList.toggle('dark', isDark)
  document.documentElement.classList.toggle('light', !isDark)
}


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

html.light {
  --color-bg: #fff;
  --color-bg-F6: #F6F8F8;
  --color-bg-20: #FFFFFF;
  --color-text: #999;
  --color-text-3: #333;
  --color-text-6: #666666;
  --color-Sel: #a11f24;
  --color-shadow: rgba(255, 207, 217, 0.8);
  --color-bg-3b: rgb(246, 248, 248);
  --color-bg-F: #ffffff;
  --color-bg-12: #f3f3f3;
  --color-foot-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.1);




}

html.dark {
  --color-bg: #121212;
  --color-bg-F6: #121212;
  --color-bg-20: #202020;
  --color-text: #999;
  --color-text-3: #333;
  --color-text-6: #666666;
  --color-Sel: #fff;
  --color-shadow: #353535;
  --color-bg-3b: #3b3b3b;
  --color-bg-F: #3b3b3b;
  --color-bg-12: #121212;
  --color-foot-shadow: 0 -4px 6px -2px rgba(214, 214, 214, 0.1);
}



:root {
  --text-22: 1.14vw;
  --text-18: 0.93vw;
  --text-16: 0.83vw;
  --text-14: 0.72vw;
  --text-12:0.62vw;

  /* 字体颜色 */
  --text-fff:#ffffff;
  --text-10: #101010;

}



.show-pc {
  display: block;
}

.PageWidth {
  width: 88.5vw;
  margin: 0 auto;
}



.show-wap {
  display: none;
}

/* @media (max-width: 800px) {
  .show-pc {
    display: none;
  }

  .show-wap {
    display: block;

  }

} */
</style>




















<!-- <template>
  <a-extract-style>
    <a-config-provider :theme="{
      token: {
        colorPrimary: '#FFCFD9',
        fontFamily: 'PingFang SC, Helvetica Neue, Arial, sans-serif',
      },
      // algorithm: theme.darkAlgorithm
    }">
      <NuxtLayout>
        <NuxtPage></NuxtPage>
      </NuxtLayout>
    </a-config-provider>
  </a-extract-style>
</template>

<script setup>
import * as AntIconsVue from "@ant-design/icons-vue";
import { theme,  } from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css';
// 注册图标
const nuxtApp = useNuxtApp();
for (const [key, component] of Object.entries(AntIconsVue)) {
  nuxtApp.vueApp.component(key, component);
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style> -->
